<template>
    <el-menu v-for="(item, index) in props.routes" :key="index" :router="true" :default-active="route.path"
        :collapse="!settingStore.isExpand" style="width:100%; border-right:0">
        <template v-if="item.meta && !item.meta.hidden">
            <el-menu-item v-if="!item.children" :index="item.path">
                <el-icon>
                    <component :is="item.meta?.icon"></component>
                </el-icon>
                <template #title>
                    <span>{{ item.meta?.title }}</span>
                </template>
            </el-menu-item>
        </template>
        <template v-if="!item.meta?.hidden">
            <el-menu-item v-if="item.children && item.children.length == 1" :index="item.children[0].path">
                <el-icon>
                    <component :is="item.meta?.icon"></component>
                </el-icon>
                <template #title>
                    <span>{{ item.meta?.title }}</span>
                </template>
            </el-menu-item>
        </template>
        <template v-if="!item.meta?.hidden">
            <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path">
                <template #title>
                    <el-icon>
                        <component :is="item.meta?.icon"></component>
                    </el-icon>
                    <span>{{ item.meta?.title }}</span>
                </template>
                <Menu :routes="item.children"></Menu>
            </el-sub-menu>
        </template>

    </el-menu>
</template>
<script setup lang="ts">
import type { RouteRecordRaw } from 'vue-router';
import { useRoute } from "vue-router"
import { useSettingStore } from '@/store/modules/setting';
const settingStore = useSettingStore();
const props = defineProps<{
    routes: RouteRecordRaw[]
}>()
defineOptions({
    name: 'Menu'
})
const route = useRoute();
</script>
<style lang="less" scoped>

</style>